<template>
  <!--
   * @FileDescription: 书院内人员总数分布情况
   * @author Sun Yan
   * @Date $
  -->
  <div class="academy-distributed-container">
    <opacity-card-frame title="书院内人员总数分布情况">
      <div ref="domChart" style="height: calc(100% - 32px); width: 100%" class="chart"></div>
    </opacity-card-frame>
  </div>
</template>
<script>
import {throttle} from "@u";

/**
 * @description: 方法描述
 * @param {参数类型} 参数名称
 * @param {参数类型} 参数名称
 * @return void
 */

import {getVirtulData, cellSize, getPieSeriesUpdate, getPieSeries, pieRadius} from "@/js/academy-details";

var scatterData1 = getVirtulData();

export default {
  name: "academy-distributed",
  props: {},
  inject: {
    '_distributedOptions': '_distributedOptions',
  },

  computed: {
    distributedOptions() {
      return this._distributedOptions();
    },

    options() {
      // this.distributedOptions
      return {
        // backgroundColor: '#f7d673', // 背景颜色透明
        // height: '100',
        // width: '100',
        bottom: 0,
        tooltip: {
          extraCssText: 'z-index: 2'
        },
        legend: {
          data: ['北里莫', '交换生', '教职工'],
          top: 10,
          right: 10,
          itemHeight: 9,//改变圆圈大小
          // icon: "circle",
          textStyle: {
            color: '#FFF'  // 图例文字颜色
          }
        },

        calendar: {
          right: 30,
          left: 30,
          top: 80,
          bottom: 120,
          orient: 'vertical',
          cellSize: cellSize,

          yearLabel: {
            show: false,
            // fontSize: 30,
            // radioSize: ['40%', '80%'],
          },

          splitLine: {
            show: false,
            lineStyle: {
              // 设置月份分割线的颜色
              color: '#D3D3D3',
              width: 4,
              type: 'solid'
            }
          },

          dayLabel: {
            // backgroundColor: '#ff4f5e',
            margin: 10,
            firstDay: 1,
            nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
            color: '#FFF',
          },

          itemStyle: {
            normal: {
              // 设置背景颜色
              color: 'rgba(0,0,0,0)',
              borderWidth: 0,
              // 设置方块分割线段颜色
              borderColor: 'rgba(0,0,0,0)',
            }
          },

          monthLabel: {
            show: false
          },
          range: ['2017-02']
        },

        // ------
        // itemStyle: {
        //   emphasis: {
        //     shadowBlur: 200,
        //     shadowColor: "rgba(0,0,0,0.8)"
        //   }
        // },
        // ------
        series: [{
          // id: 'label',
          type: 'scatter',
          coordinateSystem: 'calendar',
          symbolSize: 1,
          label: {
            // backgroundColor: '#ff4f5e',
            show: true,
            formatter: function (params) {
              return echarts.format.formatTime('d', params.value[0]);
            },
            // offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
            fontSize: 12,
            color: '#FFF'
          },
          data: scatterData1
        }]
      };
    }
  },

  watch: {
    options: {
      immediate: true,
      handler: function () {
        this.$nextTick(_ => this.setEchartData());
      },
    }
  },

  data() {
    return {
      charts: null,
    }
  },
  created() {
    window.addEventListener("resize", this.mianResize)
  },


  methods: {
    //echart options 数据 完毕调用
    setEchartData() {
      this.$nextTick(_ => {
        const domChart = this.$refs.domChart || {};
        if (this.charts === null) {

          this.charts = echarts.init(domChart)
          this.charts.setOption(this.options)
          this.charts.setOption({
            series: getPieSeries(scatterData1, this.charts)
          });


        } else {

          this.charts.clear();
          this.charts.setOption(this.options)

        }
      })
    },

    mianResize: throttle(function () {
      this.$nextTick(_ => {
        const domChart = this.$refs.domChart || {};
        this.charts && this.charts.resize({
          height: `${domChart.clientHeight}px`,
          width: `${domChart.clientWidth}px`
        });

        this.charts = echarts.init(domChart)
        this.charts.setOption(this.options)
        this.charts.setOption({
          series: getPieSeries(scatterData1, this.charts)
        });

      })
    }),


  }
}
</script>

